<template>
  <div class="_aisde">
    <!-- <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
      <el-radio-button :label="false">expand</el-radio-button>
      <el-radio-button :label="true">collapse</el-radio-button>
    </el-radio-group>       :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"-->
    <img
      src="https://storage.googleapis.com/glaze-ecom.appspot.com/images/qlEEZvejP/thumbs/232.png"
      alt=""
      width="200"
    />
    <el-menu :default-active="onRoute" class="el-menu-vertical-demo el-menu-bg">
      <el-menu-item index="/user" @click="clickPushRouter('/user')">
        <!-- <el-icon><icon-menu /></el-icon> -->
        <template #title>用户管理</template>
      </el-menu-item>
      <el-menu-item index="/class" @click="clickPushRouter('/class')">
        <!-- <el-icon><document /></el-icon> -->
        <template #title>班级管理</template>
      </el-menu-item>
      <el-menu-item index="/course" @click="clickPushRouter('/course')">
        <!-- <el-icon><setting /></el-icon> -->
        <template #title>课程管理</template>
      </el-menu-item>
      <el-menu-item index="/student" @click="clickPushRouter('/student')">
        <!-- <el-icon><setting /></el-icon> -->
        <template #title>学生管理</template>
      </el-menu-item>
      <el-menu-item index="/score" @click="clickPushRouter('/score')">
        <!-- <el-icon><setting /></el-icon> -->
        <template #title>成绩管理</template>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import { ref,computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";

export default {
  setup() {
    // 路由切换方法
    const router = useRouter();
    const route = useRoute()
    function clickPushRouter(path) {
      router.push(path);
    }
    console.log(router);
    console.log(route);
    let onRoute = computed(()=>{
      return route.path
    })
    // const handleOpen = (key, keyPath) => {
    //   console.log(key, keyPath);
    // };
    // const handleClose = (key, keyPath) => {
    //   console.log(key, keyPath);
    // };
    return { clickPushRouter,onRoute };
  },
};
</script>

<style lang="less" scoped>
._aisde {
  img {
    border-radius: 50%;
    margin: 50px 0;
  }
  ::v-deep .el-menu {
    background-color: rgba(0, 0, 0, 0);
    margin: 0 10px;
    border: none;
  }
  ::v-deep .el-menu-item {
    font-size: 16px;
    transition: font-size 1s;
  }
  ::v-deep .el-menu-item.is-active {
    color: #95ba59;
    // background-color: #fff;
    font-size: 20px;
    font-weight: 700;
    transition: font-size 0.5s;
    border-bottom: 1px solid #95ba59;
    // margin: 0 20px;
  }
}
</style>